<template>
	<view class="my_content">
		<view class="my_header">
			<view class="my_block">
				<view class="my_image">
					<image
						:src="serverUrl + user.img"
						mode="aspectFill"></image>
				</view>
				<text class="name">{{user.title}}</text>
				<text class="te">小蓝书号：{{user.id}}</text>
				<view class="block">
					<view class="ico"></view><text class="text">{{user.text}}</text>
				</view>
			</view>
			<view class="my_ul">
				<view class="my_li">
					<text class="num">{{user.text3}}</text>
					<text>关注</text>
				</view>
				<view class="my_li">
					<text class="num">{{user.text2}}</text>
					<text>粉丝</text>
				</view>
				<view class="my_li">
					<text class="num">{{user.text4}}</text>
					<text>获赞与收藏</text>
				</view>
				<!-- <view class="my_set"></view> -->
			</view>
		</view>
		<view class="my_conBlock">
			<view class="myN_ul">
				<view class="myN_li" :class="{'active':noteOn === n}" v-for="(text,n) in navList" @click="cutNote(n)" :key="n"><text>{{text}}</text></view>
			</view>
			<view class="myN_ulBl">
				<view class="nyN_liBl" v-show="noteOn === 0">
					<view class="null_hint" v-if="!noteList">
						还没有笔记哦
					</view>					
					<data-list :listData="noteList"></data-list>	
				</view>
				<view class="nyN_liBl" v-show="noteOn === 1">
					<view class="null_hint" v-if="!collectList">
						还没有收藏哦
					</view>
					<data-list :listData="collectList"></data-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataList from '../../components/dataList.vue'
	export default {
		data:function(){
			return {
				serverUrl:this.serverUrl,//服务器路径
				user:{},//用户数据
				navList:['笔记','收藏'],//导航列表
				noteOn:0 ,//笔记/收藏开关
				noteList:[] ,//笔记数据列表
				collectList:[] //收藏数据列表
			}
		},
		components:{
			dataList
		},
		mounted:function(){
			this.getUser(); //调用用户数据
			this.getList(); //调用列表数据
		},
		methods:{
			//获取用户数据
			async getUser(){
				const {data:res} = await this.$http({
					url: 'd_user?id=12'
				})				
				this.user = res.data				
			},
			cutNote(n){
				this.noteOn = n; 
			},
			//获取列表数据
			async getList(){
				const {data:res} = await this.$http({
					url: 'd_list'
				})		
				this.noteList = res.data.filter((item)=>{
					return item.child2 === this.user.title
				})				
				this.collectList = res.data.filter((item)=>{					
					return this.user.text5.split(",").includes(item.id.toString()) 
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/common.scss';
	page {background:#f4f8fb;}
	.my_content {position: relative;width:100%;}
	.my_header {position: relative;width:100%;background-image: linear-gradient(#23374f, #796e68);padding:0 4%;padding-top: 200rpx;color:#fff;}
	.my_block {position: relative;padding-left:200rpx;
		.my_image image {width:168rpx;height:168rpx;border-radius: 200rpx;position: absolute;left:0px;top:0px;border:1px solid #fff;}
		.name {display: block;font-size:22px;margin-bottom:6rpx;line-height: 18px;padding-top:25rpx;}
		.te {font-size:12px;font-weight: 100;line-height: 12px;}
		.block {position: relative;top:-6rpx;}
		.ico {padding:0rpx 30rpx;background:rgba(255,255,255,0.3) url(../../static/images/a1_9.png) no-repeat center;background-size:28rpx ;display: inline-block;border-radius: 200rpx;height:40rpx;position: relative;top:10rpx;}
		.text {background:rgba(255,255,255,0.3);padding:4rpx 20rpx;border-radius: 200rpx;margin-left:10rpx;font-size:12px;}		
	}
	.my_ul {position: relative;margin-top:40rpx;padding-bottom:70rpx;width: 92%;}
	.my_ul:after {content: "";display: block;clear: both;}
	.my_li {
		position: relative;float: left;margin-right:50rpx;text-align: center;
		.num {display: block;}
	}
	.my_set {position: absolute;right:0%;top:20rpx;width:100rpx;height:60rpx;border-radius: 200rpx;background:rgba(255,255,255,0.3) url(../../static/images/a2_1.png) no-repeat center;background-size:35rpx;border:1px solid rgba(255,255,255,0.5);}
	.my_conBlock {position: relative;margin-top:-40rpx;z-index: 90;}
	.myN_ul {position: relative;width:100%;text-align: center;border-bottom:1px solid #eee;height:100rpx;background:#fff;overflow: hidden;border-radius: 20rpx 20rpx 0 0;box-shadow: 0 0 3rpx 0 #ddd;}
	.myN_li {display: inline-block;margin:0 60rpx;padding:25rpx 0;font-size:16px;position: relative;opacity: 0.6;}
	.myN_li.active {opacity: 1;}
	.myN_li:after {content: "";display: block;width:0%;border-bottom:2px solid $ulColor;margin:auto;margin-top:5rpx;transition: all 0.3s;;}
	.myN_li.active:after {width:100%;}
	.nyN_liBl {position: relative;width:100%;}
	.null_hint {margin:auto;margin-top:180rpx;width:60%;text-align: center;padding-top:130rpx;background: url(../../static/images/b2_3.png) no-repeat center top;background-size:120rpx;opacity: 0.6;padding-bottom:130rpx;}
	
</style>
